<template>
  <div>
    <zm-panel :title="Title" :visible.sync="value" @change="close">
      <div class="wp90 mt20 mb20 ma">
        <el-tabs v-model="editableTabsValue" v-if="!loading">
          <el-tab-pane label="基本信息" name="1">
            <!-- 步骤1 -->
            <div>
              <step-one
                ref="step1"
                v-model="form"
                class=" ma pl100"
                @handle-after="stepOneCallBack"
              ></step-one>
            </div>
          </el-tab-pane>
          <el-tab-pane label="使用规则" name="2">
            <!-- 步骤2 -->
            <div v-if="isShowStepTwo">
              <step-two ref="step2" v-model="form" class="ma"></step-two>
            </div>
            <h3 class="fc9" v-else>{{form.type === '4'?'次卡规则暂和兑换券规则一致':'暂无可配置规则'}}</h3>
          </el-tab-pane>
          <el-tab-pane label="提成方案" name="3">
            <!-- 步骤3 -->
            <div>
              <step-three ref="step3" v-model="form"></step-three>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div slot="footer" class="tc">
        <zm-button @click="close" v-if="+editableTabsValue">
          取 消
        </zm-button>
        <zm-button @click="prev" v-if="+editableTabsValue !== 1">
          上一步
        </zm-button>
        <zm-button @click="next" v-if="+editableTabsValue !== 3" type="primary">
          下一步
        </zm-button>
        <zm-button @click="save" v-if="+editableTabsValue === 3" type="primary">
          {{id?'确认修改':'保存'}}
        </zm-button>
        <zm-button @click="save('submit')" v-if="isShowSubmit" type="primary">
          提交审批
        </zm-button>
      </div>
    </zm-panel>
  </div>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import StepOne from './components/StepOne'
import StepTwo from './components/StepTwo'
import StepThree from './components/StepThree'
import { rules } from '../../const'
import productDraftApis from '@/api/src/productDraft'
import approveApis from '@/api/src/approve'
import VALID_RULES from '@/utils/validateRule'
import {PROCESS_TYPE} from '@/model'
import cloudApis from '@/api/src/cloud'

const practiceCostPriceRule = (rule, val, callBack) => {
  if (val && val < 0) {
    callBack(new Error('数值应大于0'))
  } else {
    callBack()
  }
}
export default {
  // name: 'ProductConfigNewProduct',
  components: { StepOne, StepTwo, StepThree },
  mixins: [panelMixin],
  provide () {
    return {
      $product: this
    }
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isApprove: {
      type: Boolean,
      default: false
    }
  },
  data () {
    // step 2 基础规则默认项
    const DEFAULT_ITEM = {
      directionsUse: '', // 使用须知

      name: '',
      relationType: '', // 选择影院
      relationId: '', // 指定影院，默认为 -1
      filmType: '1', // 执行影片
      filmCode: '', // 执行影片->指定影片编码
      hallTypeList: [], // 执行影厅
      hallType: '', // 执行影厅字符串
      copyTypeList: [], // 执行制式
      copyType: '', // 执行制式字符串
      minPrice: '', // 兑换票价最小值
      maxPrice: '', // 兑换票价最大值
      ruleType: '', // 补差规则
      diffPriceType: '', // 补差规则-> 差额补差
      fixedPrice: '', // 补差规则-> 差额补差-> 固定价格
      increasePrice: '', // 补差规则-> 差额补差-> 加价价格
      rule:
        // 补差规则-> 固定补差
        [
          {
            copyType: '',
            price: [
              {
                hallType: '',
                money: ''
              }
            ]
          }
        ],
      goodsType: '1', // 1,卖品类型：1全部，2指定
      goodsId: '-1', // -1,卖品id
      isDiscount: '0', // 1,是否限额优惠：0否，1是
      couponPrice: '', // 1,优惠券抵值金额
      fullPrice: '', // 10,满减优惠，满多少金额
      reductionPrice: '', // 1,满减优惠，减多少金额
      isLimitUseTime: '0', // 1,是否限制使用时间：0否，1是
      useStartTime: '', // "2020-01-01 00:00:00",限制使用开始时间
      useEndTime: '', // "2020-01-01 00:00:00"限制使用结束时间
      discountRule: {
        discount: '', // 折扣率
        floatRule: '', // 金额规则
        priceRoundingType: '', // 金额规则
        subsidyTop: '' // 补贴金额
      }
    }
    return {
      loading: true, // 解决渲染先后问题
      isShowStepTwo: false,
      editableTabsValue: '1',
      DEFAULT_ITEM,
      form: {
        companyId: '', // 公司
        // step 1 start
        name: '', // 产品名称
        childCategory: '', // 二级分类名称
        type: '1', // 产品类型-> 1兑换券，2卖品券，3点卡，4次卡
        cardName: '', // 卡名称
        businessType: '', // 业务类型-> 1团队，2营销，3心选
        parValue: '', // 产品面值
        isDiscount: '0', // 优惠面值：是否优惠：0否，1是
        couponPrice: '', // 优惠面值
        fullPrice: '', // 满减优惠，满多少金额
        reductionPrice: '', // 满减优惠，减多少金额
        channelId: '', // 指定可用渠道
        salesType: '-1', // 销售单类型
        couponName: '', // 券名称
        isLimitChannel: '0', // 是否限制渠道可用-> 0否，1是
        saleScalePrice: '', // 销售比例金额
        saleScalePoint: '', // 销售比例点数
        consumptionScalePrice: '', // 消费比例金额
        consumptionScalePoint: '', // 消费比例点数
        isUnbundling: '0', // 解绑配置
        isGive: '1', // 转赠配置
        useScope: '', // 使用范围  1 电影  2 心选
        exchangeRange: '', // 券兑换范围-> 1线上，2线下
        isOpenRecharge: '0', // 是否开放充值
        isApartment: '1', // 产品可售部门
        apartmentId: '', // 产品可售部门id
        usageRules: '', // 使用规则
        remark: '', // 产品备注
        couponProductId: '', // 关联兑换券产品ID
        isLimitExpiredTime: '0', // 是否限制过期时间：0否，1是
        expiredStartTime: '', // 限制使用开始时间
        expiredEndTime: '', // 限制使用结束时间
        // step 1 end
        // step 2 start
        directionsUse: '', // 使用须知

        relationType: '',
        relationId: '',
        goodsType: '', // 卖品类型
        goodsId: '', // 指定卖品ids
        isLimitUseTime: '', // 是否限制使用时间：0否，1是
        useStartTime: '', // 限制使用开始时间
        useEndTime: '', // 限制使用结束时间
        // 心选规则
        ruleStartTime: '', // 心选规则开始时间
        ruleEndTime: '', // 心选规则结束时间
        isLimitXxChannel: '', // 可用渠道
        xxChannelId: '', // 指定渠道ID
        isLimitCompany: '0', // 是否限制公司可用：0否，1是
        companyGroupId: '', // 不可用公司id
        xxRule: [
          // xxRule 心选规则
          {
            companyType: '1',
            companyId: '',
            companyName: '',
            benchmarkMoney: '',
            equMoney: '',
            name: ''
          }
        ],
        xxExchange: [], // 心选兑换范围
        exchangeRules: '', // 规则开始时间
        onlineRule: [JSON.parse(JSON.stringify(DEFAULT_ITEM))], // 线上基础规则
        offlineRule: [JSON.parse(JSON.stringify(DEFAULT_ITEM))], // 线下基础规则
        onlineSpecialRule: [{programId: ''}], // 线上特殊节假日规则
        offlineSpecialRule: [{programId: ''}], // 线下特殊节假日规则
        // step 2 end
        // setp 3 start
        theoryCostPrice: '', // 理论成本
        practiceCostPrice: '', // 实际成本
        practiceCostPriceType: '1', // 配置方式
        proportionData: [
          // 提成配置
          // {
          //   sectionType: '', // 区间类型：1区间，2便捷
          //   valueType: '', // 区间值类型：1百分百，2元
          //   minOperationSymbol: '', // 运算符号：1大于，2大于等于，3小于，4小于等于，5等于
          //   maxOperationSymbol: '', // 运算符号：1大于，2大于等于，3小于，4小于等于，5等于
          //   minValue: '', // 区间最小值
          //   maxValue: '', // 区间最大值
          //   proportion: '', // 提成比例
          //   theoryCostPrice: '', // 理论成本
          //   practiceCostPrice: '' // 实际成本
          // }
        ],
        expiredData: [
          // {
          //   sectionType: '', // 区间类型：1区间，2便捷
          //   operationSymbol: '', // 运算符号：1大于，2大于等于，3小于，4小于等于，5等于
          //   minValue: '', // 区间最小值
          //   maxValue: '', // 区间最大值
          //   day: ''// 有效期天数
          // }
        ], // 有效期规则
        saleRuleNumber: '20', // 销售规则数量
        saleRuleNumberOperationSymbol: '1', // 销售规则数量运算符号：1大于，2大于等于
        saleTotalPrice: '', // 销售总额
        proportionTimesData: [] // 次卡提成配置

        // step 3 end
      }
    }
  },

  computed: {
    Title () {
      return this.id ? '编辑产品' : '新增产品'
    },
    // 校验规则
    rules () {
      const _obj = rules(this)
      _obj.parValue = {validator: VALID_RULES.stringNumber, required: true}// 产品面值
      _obj.theoryCostPrice = {validator: VALID_RULES.stringNumber, required: true}// 理论成本
      _obj.practiceCostPrice = {validator: practiceCostPriceRule}// 实际成本
      _obj.couponPrice = {validator: VALID_RULES.stringNumber, required: true}// 优惠面值
      _obj.fullPrice = {validator: VALID_RULES.stringNumber, required: true}// 满减
      _obj.saleScalePrice = {validator: VALID_RULES.stringNumber, required: true}// 销售比例
      _obj.consumptionScalePrice = {validator: VALID_RULES.stringNumber, required: true}// 销售比例
      return _obj
    },
    isShowSubmit () {
      if (+this.editableTabsValue === 3) {
        if (!this.id) {
          return true
        } else {
          return ['2', '4', '0'].includes(this.form.checkStatus)
        }
      } else {
        return false
      }
    }
  },
  watch: {},
  created () {
    if (this.id) {
      this.init()
    } else {
      this.isShowStepTwo = true
      this.loading = false
    }
  },
  methods: {
    // 获取详情
    async init () {
      this.loading = true
      const DEFAULT_ITEM = JSON.parse(
        JSON.stringify(this.DEFAULT_ITEM)
      )
      const companyList = await cloudApis.getCompanyList()
      const companyGroupList = await cloudApis.getCompanyGroupList()
      const _res = await productDraftApis.getInfo({ id: this.id })
      if (_res.onlineRule && _res.onlineRule.length <= 0) {
        _res.onlineRule = [{...this.DEFAULT_ITEM}]
      } else {
        _res.onlineRule = _res.onlineRule.map(item => {
          return {
            ...item,
            ...{hallTypeList: [], copyTypeList: []}
          }
        })
      }
      if (_res.offlineRule && _res.offlineRule.length <= 0) {
        _res.offlineRule = [{...this.DEFAULT_ITEM}]
      } else {
        _res.offlineRule = _res.offlineRule.map(item => {
          return {
            ...item,
            ...{hallTypeList: [], copyTypeList: []}
          }
        })
      }
      if (_res.onlineSpecialRule && _res.onlineSpecialRule.length <= 0) {
        _res.onlineSpecialRule = [{programId: ''}]
      }
      if (_res.offlineSpecialRule && _res.offlineSpecialRule.length <= 0) {
        _res.offlineSpecialRule = [{programId: ''}]
      }
      // 处理点卡 xxRule
      if (_res.type === '3') {
        if (_res.xxRule && _res.xxRule.length > 0) {
          _res.xxRule = _res.xxRule.map(item => {
            let _selectList = []
            if (item.companyType === '1') {
              _selectList = companyList
            } else {
              _selectList = companyGroupList
            }
            return {
              ...item,
              selectList: _selectList
            }
          })
        }
      }
      console.log(_res.xxRule, 'xxRule')
      _res.companyId = _res.companyId || ''
      this.$set(this, 'form', _res)

      // 点卡、次卡不需要展示线上线下规则模板
      if (this.form.type === '3' && this.form.type === '4') {
        this.isShowStepTwo = false
      } else {
        this.isShowStepTwo = true
      }
      // 处理有效期规则数据
      if (this.form.expiredData && this.form.expiredData.length) {
        this.form.expiredData = this.form.expiredData.map(item => {
          return {
            ...item,
            minValue: item.minValue ? parseInt(item.minValue) : '',
            maxValue: item.maxValue ? parseInt(item.maxValue) : ''
          }
        })
      }

      this.loading = false
      // console.log('onlineRule', this.form.onlineRule)
    },
    // 下一步
    next () {
      // 优惠券特殊处理
      if (+this.form.type === 5) {
        this.form.exchangeRange = '1'
      }
      this.$refs[`step${this.editableTabsValue}`]
        .handleFormValidate()
        .then(() => {
          this.editableTabsValue = (+this.editableTabsValue + 1).toString()
        })
        .catch((err) => {
          console.log(err)
          if (err !== 'cancel') {
            this.$message.warning(`${err}有未填项，请填写完整`)
          }
        })
    },
    // 上一步
    prev () {
      this.editableTabsValue = (+this.editableTabsValue - 1).toString()
    },
    // 完成
    async save (type) {
      if (+this.form.isApartment === 1) {
        this.form.apartmentId = '-1'
      }
      const _apiFnc = this.id ? productDraftApis.update : productDraftApis.create
      const success = new Promise((resolve, reject) => {
        resolve('success')
      })
      const step1 = this.$refs.step1.handleFormValidate()
      let step2 = null
      // 次卡不需要校验使用规则
      if (this.form.type === '4') {
        step2 = success
      } else {
        // 点卡包含心选业务才去校验
        step2 = this.isShowStepTwo && this.$refs.step2.isShowPointCard === false ? success : this.$refs.step2.handleFormValidate()
      }
      const step3 = this.$refs.step3.handleFormValidate()

      await Promise.all([step1, step2, step3])
        .then(async () => {
          if (type === 'submit') {
            const isVoucher = this.form.type === '1' // 产品类型是兑换券
            const includesHeart = this.form.businessType.includes('3') || (this.infoData && this.infoData.useScope.includes('2'))// 业务类型是否包含心选
            const onLineRuleHasDiscountSenders = this.form.onlineRule.some(i => i.ruleType === '4') // 线上基础规则补差规则是“折扣补差”
            if (isVoucher && includesHeart && onLineRuleHasDiscountSenders) {
              this.$message.warning('该销售单配置的补差规则不适用于心选！')
              return
              // this.$confirm('该销售单配置的补差规则不适用于心选，确认提交审批？', '提示', {type: 'warning'}).then(() => {
              //   this.submitApprove()
              // }).catch(() => {})
            } else {
              this.submitApprove()
            }
          } else {
            // 如果不是点卡,practiceCostPriceType字段通通为'1'
            if (this.form.type !== '3') {
              this.form.practiceCostPriceType = '1'
            }
            await _apiFnc(this.form)
            this.$message.success('操作成功')
            this.close()
            this.$emit('re-load')
          }
        })
        .catch((err) => {
          if (err.toString() !== 'cancel') {
            this.$message.warning(`${err}有未填项，请填写完整`)
          }
        })
    },
    // 次卡->选择关联产品，控制stepThree的请求数据
    stepOneCallBack () {
      this.$refs.step3.loadList()
    },
    isJSON (str) {
      if (typeof str === 'string' && str) {
        return true
      } else {
        return false
      }
    },
    submitApprove () {
      const _apiFnc = this.id ? productDraftApis.update : productDraftApis.create
      approveApis.checkApprove({processType: PROCESS_TYPE.product}).then(() => {
        // 保存接口
        _apiFnc(this.form)
          .then(async (res) => {
            // PROCESS_TYPE
            await approveApis.submit({
              processType: PROCESS_TYPE.product,
              linkName: this.form.name || '',
              businessId: res.id
            })
            this.$message.success('操作成功')
            this.close()
            this.$emit('re-load')
          })
          .catch((err) => err)
      }).catch(err => { console.log('errMsg-', err) })
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
